<template>
    <div class="zong">
        <Top/>
        <Inswipe class="ban"/>
        <div class="Imaintop wp">
            <div>
                <span class="ImtOne">新品上市</span>
                <span>促销大庆</span>
            </div>
        </div>
        <div class="Imainbottom wp">
            <div class="ImL">
                <span class="Imbtop">限时断货</span>
                <img class="Imbleft" src="../../assets/user/xianshitehui.png" alt="">
            </div>
            <div class="Imline"></div>
            <div class="Imainr">
                <div>
                    <p class="Imrl">品牌精选</p>
                    <img src="../../assets/user/chanpin-bao.png" alt="">
                </div>
                <div class="bd"></div>
                <div>
                    <p class="Imrl">超值热卖</p>
                    <img src="../../assets/user/shuiguo.png" alt="">
                </div>
            </div>
        </div>

        <div class="Imaintop wp">
            <div>
                <span class="ImtOne ImTwo">今日推荐</span>
            </div>
        </div>
        <img class="tu" :src="tu" alt="">
         <ul class="Slike">
          <li>
            
            <ul class="Slikemain" >
                <li v-for="(item,index) in like" :key="index">
                    <template v-if="index==0">
                        <div >
                    <img :src="item.src" alt="">
                  </div>
                  <div>
                    {{item.zi}}
                  </div>
                  <p class="Slikered">￥{{item.money}}</p>
                    </template>
                    <template v-if="index>0">
                        <div class="Sline">
                      <img :src="item.src" alt="">
                    </div>
                  <div>
                    {{item.zi}}
                  </div>
                  <p class="Slikered">￥{{item.money}}</p>
                    </template>

                </li>
              </ul> 
            </li> 
        </ul>
        <img class="tu tu1" :src="tu" alt="">
         <ul class="Slike">
          <li>
            
            <ul class="Slikemain" >
                <li v-for="(item,index) in like" :key="index">
                    <template v-if="index==0">
                        <div >
                    <img :src="item.src" alt="">
                  </div>
                  <div>
                    {{item.zi}}
                  </div>
                  <p class="Slikered">￥{{item.money}}</p>
                    </template>
                    <template v-if="index>0">
                        <div class="Sline">
                      <img :src="item.src" alt="">
                    </div>
                  <div>
                    {{item.zi}}
                  </div>
                  <p class="Slikered">￥{{item.money}}</p>
                    </template>

                </li>
              </ul> 
            </li> 
        </ul>
        <a ref="to" class="Sback" href="#">
            <img src="../../assets/user/jiantou.png" alt="">
        </a>
        <Meizhuang/>
        <Footer/>
    </div>
</template>

<script>
import Top from '../ma/Top';
import Inswipe from '../ma/Inswipe';
import Footer from '../ma/footer';
import Meizhuang from '../ma/Meizhuang';

export default {
    name:'Index',
    components:{
        Top,
        Inswipe,
        Footer,
        Meizhuang
    },
    data(){
        return{
            tu:this.$store.state.tu,
            // 猜你喜欢
        like:this.$store.state.tuall,
        }
    },
    methods:{
        scrollToTop() { 
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop>200) {
                this.$refs.to.style.display = 'block';
            }else{
                this.$refs.to.style.display = 'none';
            }
        }
    },
    mounted(){
        window.addEventListener('scroll', this.scrollToTop)
        this.$refs.to.style.display = 'none';
    }
}
</script>

<style scoped>
.zong {
    font-size: 2.4rem;
}
.ban {
    position: relative;
    margin: 15rem 0 2rem 0;
}
.Imaintop {
    background: #fff;
    border-bottom: 1px solid #ccc;
    text-align: left;
    font-size: 3rem;
    height: 6rem;
    line-height: 6rem;
}
.wp {
    padding: 0 2rem;
    color: #4d4d4d;
}
.ImtOne {
    padding-left: 4rem;
    background: url(../../assets/user/xiaolaba.png) no-repeat 0 0.5rem;
    margin-right: 2rem;
}
.ImTwo {
    background: url(../../assets/user/rili.png) no-repeat 0 0.5rem;
}
.Imainbottom {
    height: 29.9rem;
    border-bottom: 1px solid #ccc;
    background: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 2.4rem;
    margin-bottom: 1.9rem;
}
.Imbleft {
    padding-top: 7.2rem;
}
.ImL {
    position: relative;
}
.Imbtop {
    position: absolute;
    top: 1.4rem;
    background: #e53e42;
    color: #fff;
    height: 4rem;
    line-height: 4rem;
    width: 11rem;
    text-align: center;
}
.Imline {
    height: 28rem;
    border: 1px solid #ccc;
}
.Imainr {
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: relative;
}
.Imrl {
    writing-mode: vertical-rl;
    font-size: 2.4rem;
    color: #f15779;
    margin-right: 6.7rem;
    display: inline-block;
    letter-spacing: 0.5rem;
}
/* 下边框 */
.bd {
    border-bottom: 1px solid #ccc;
    width: 37rem;
    position: absolute;
    top: 14rem;
    margin-left: -2.5rem;
}
/* 猜你喜欢 */
.Slike {
    margin-top: -0.5rem;
    background: #fff;
    font-size: 2.4rem;
    color: #4d4d4d;
    padding:1.5rem 2rem 2.3rem 2rem;
    border-bottom: 1px solid #ccc;
}
.Slikemain {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* margin: 2.5rem 0; */
}
.Slikered {
    color: #e83d41;
}
.Sline {
  height: 16rem;
  width: 0;
  border-left: 0.2rem solid #ccc;
  padding-left: 5.9rem;
  margin-left: -5.9rem;
}
.tu {
    width: 100%;
    height: 100%;
}
.tu1 {
    margin-top: 2rem;
    border-top: 1px solid #ccc;
}
.Sback {
    position: fixed;
    top: 50%;
    right: 2rem;
    height: 4.8rem;
    width: 4.8rem;
    border-radius: 50%;
    transition: all 2s ease-in;
}
.yin {
    display: none;
}
.xin {
    display: block;
}
</style>